import { useProject } from "./../../utils/project";
import { useSetUrlSearchParam, useUrlQueryParam } from "utils/url";
import { useMemo } from "react";
import { useSearchParams } from "react-router-dom";

export const useProjectSearchParams = () => {
    const [param, setParam] = useUrlQueryParam(["name", "personId"]);
    return [
        useMemo(
            () => ({ ...param, personId: Number(param.personId) || undefined }),
            [param]
        ),
        setParam,
    ] as const;
};

export const useProjectsQueryKey = () => {
    const [params] = useProjectSearchParams();
    return ["projects", params];
};

export const useProjectModal = () => {
    // 读取Url中的参数
    const [{ projectCreate }, setProjectCreate] = useUrlQueryParam([
        "projectCreate",
    ]);
    const [{ editingProjectId }, setEditingProjectId] = useUrlQueryParam([
        "editingProjectId",
    ]);
    const setUrlParams = useSetUrlSearchParam();
    const { data: editingProject, isLoading } = useProject(
        Number(editingProjectId)
    );

    const open = () => setProjectCreate({ projectCreate: true });
    const close = () =>
        setUrlParams({ projectCreate: "", editingProjectId: "" });
    const startEdit = (id: number) =>
        setEditingProjectId({ editingProjectId: id });
    return {
        projectModalOpen: projectCreate === "true" || Boolean(editingProject),
        editingProject,
        isLoading,
        open,
        close,
        startEdit,
    };
};
